// 获取 DOM 元素
const loadUsersBtn = document.getElementById('loadUsers');
const loadPostsBtn = document.getElementById('loadPosts');
const clearDataBtn = document.getElementById('clearData');
const loadingElement = document.getElementById('loading');
const dataContainer = document.getElementById('dataContainer');

// 添加事件监听器
loadUsersBtn.addEventListener('click', loadUsers);
loadPostsBtn.addEventListener('click', loadPosts);
clearDataBtn.addEventListener('click', clearData);

// 加载用户列表
function loadUsers() {
    showLoading();

    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/users', true);

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            hideLoading();
            if (xhr.status === 200) {
                const users = JSON.parse(xhr.responseText);
                displayUsers(users);
            } else {
                showError('加载用户数据失败');
            }
        }
    };

    xhr.onerror = function() {
        hideLoading();
        showError('网络错误');
    };

    xhr.send();
}

// 加载文章列表
function loadPosts() {
    showLoading();

    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            hideLoading();
            if (xhr.status === 200) {
                const posts = JSON.parse(xhr.responseText);
                displayPosts(posts);
            } else {
                showError('加载文章数据失败');
            }
        }
    };

    xhr.onerror = function() {
        hideLoading();
        showError('网络错误');
    };

    xhr.send();
}

// 显示用户列表
function displayUsers(users) {
    let html = '<h2>用户列表</h2>';

    users.forEach(user => {
        html += `
            <div class="user-item">
                <div class="user-name">${user.name}</div>
                <div class="user-email">${user.email}</div>
                <div>电话: ${user.phone}</div>
                <div>网站: ${user.website}</div>
            </div>
        `;
    });

    dataContainer.innerHTML = html;
}

// 显示文章列表
function displayPosts(posts) {
    let html = '<h2>文章列表</h2>';

    // 只显示前10篇文章
    posts.slice(0, 10).forEach(post => {
        html += `
            <div class="post-item">
                <div class="post-title">${post.title}</div>
                <div class="post-body">${post.body}</div>
            </div>
        `;
    });

    dataContainer.innerHTML = html;
}

// 清空数据
function clearData() {
    dataContainer.innerHTML = '';
}

// 显示加载状态
function showLoading() {
    loadingElement.classList.remove('hidden');
    disableButtons(true);
}

// 隐藏加载状态
function hideLoading() {
    loadingElement.classList.add('hidden');
    disableButtons(false);
}

// 启用/禁用按钮
function disableButtons(disable) {
    loadUsersBtn.disabled = disable;
    loadPostsBtn.disabled = disable;
}

// 显示错误信息
function showError(message) {
    dataContainer.innerHTML = `<div class="error">${message}</div>`;
}

// 页面加载完成后的初始化
document.addEventListener('DOMContentLoaded', function() {
    console.log('页面加载完成，AJAX功能已准备就绪');
});
